<template>
<div id="course">
    <div id="course1" v-if=false>
    <!-- 轮播图的部分 -->
    <div class="swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
            <img  :src="$qiniu.url+'assets/img/5.jpg'">
        </mt-swipe-item>
        <mt-swipe-item>
          <img  :src="$qiniu.url+'assets/img/5.jpg'">
        </mt-swipe-item>
        <mt-swipe-item>
          <img  :src="$qiniu.url+'assets/img/5.jpg'">
        </mt-swipe-item>
     </mt-swipe>
    </div>
    <!-- 按钮的部分 -->
    <div class="course-btn">
        <router-link class="btn all-course " :to="{ name:'allcourse',params:{date:today()}}">全部课程</router-link>
        <router-link class="btn all-plan " :to="{ name:'plan',params:{date:today()}}">全部计划</router-link>
    </div>
    <!-- 精选课程的部分 -->
    <div class="featured">
        <p class="title">精选课程</p>
        <div class="wrapper">
            <ul>
                <!--每一个课程给其进行跳转到详情页面-->
                <router-link :to="{ name:'course_detail',params:{id : course.id ,date:today()}}"
                              tag="li"
                              v-for="course in featured_course"
                              :key="course.id">
                        <div class="item" :style="{ backgroundImage: 'url(' + course.image + ')' }">
                            <div class="text">
                                <h1>{{course.name}}</h1>
                                <div class="middle">
                                    <span>时间：{{course.duration}}分钟</span> <span>燃脂：{{course.kcal}}千卡</span>
                                </div>
                                <div class="difficulty">
                                    <span>难度：</span>
                                    <i v-bind:class="{ unchoosed: difficulty(1,course.grade) }"
                                    :style="'background-image: url('+$qiniu.url+'assets/img/fire.png)'"></i>
                                    <i v-bind:class="{ unchoosed: difficulty(2,course.grade) }"
                                    :style="'background-image: url('+$qiniu.url+'assets/img/fire.png)'"></i>
                                    <i v-bind:class="{ unchoosed: difficulty(3,course.grade) }"
                                    :style="'background-image: url('+$qiniu.url+'assets/img/fire.png)'"></i>
                                    <i v-bind:class="{ unchoosed: difficulty(4,course.grade) }"
                                    :style="'background-image: url('+$qiniu.url+'assets/img/fire.png)'"></i>
                                    <i v-bind:class="{ unchoosed: difficulty(5,course.grade) }"
                                    :style="'background-image: url('+$qiniu.url+'assets/img/fire.png)'"></i>
                                </div>
                            </div>
                        </div>
                </router-link>
            </ul>
        </div>
    </div>
    <Loading v-if="LoadingShow"></Loading>
</div>
    <Allcourse></Allcourse>
     <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import Carousel from './course/carousel.vue'
    import Allcourse from "./course/allcourse.vue"
    import Loading from './loading';
    import {
        Swipe,
        SwipeItem
    } from 'mint-ui';
    import {
        refreshTitle,
        today
    } from "../tools.js"
    import 'mint-ui/lib/Swipe/style.css';
    export default {
        components: {
            Loading,
            Allcourse
        },
        data() {
            return {

            }
        },
        created() {
            refreshTitle(this.$route.meta.title);
            this.$store.dispatch('GET_FEATURED_COURSE');
        },
        computed: {
            // 获取精选课程的信息
            featured_course() {
                return this.$store.state.course.featured_course
            },
            // 页面的loading的显示与否
            LoadingShow() {
                return this.$store.state.loadings.show
            },
        },
        methods: {
            // 课程难度的控制
            difficulty(i, grade) {
                var grades = Math.round(grade / 2);
                //当条件成立的时候，返回false，样式不成立
                return (i - grades <= 0) ? false : true
            },
            // 获取的是当前传递过来的日期
            today() {
                return this.$route.params.date;
            }
        }
    }
</script>
<style>
    #course1 {
        font-size: 16px;
        .swipe {
            width: 100%;
            height: 95px;
            img {
                width: 100%;
            }
        }
        /*按钮*/
        .course-btn {
            height: 4rem;
            position: relative;
            .btn {
                margin: 2%;
                width: 35%;
                border-radius: 0.3rem;
                display: inline-block;
                padding: 0.6rem;
                text-align: center;
                background-color: #fff;
                color: #00BA9B;
            }
            .all-course {
                position: absolute;
                left: 5%;
            }
            .all-plan {
                position: absolute;
                right: 5%;
            }
        }
        /*精选课程*/
        .featured {
            background-color: rgb(50, 55, 77);
            p {
                text-align: center;
                color: #fff;
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
            }
            .wrapper {
                ul li {
                    .item {
                        /*background-image: url("../assets/img/3.jpg");*/
                        background-size: cover;
                        background-repeat: space;
                        margin-bottom: 0.3rem;
                        color: #fff;
                        line-height: 2;
                        height: 10rem;
                        position: relative;
                        .text {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            left: 0;
                            top: 0;
                            background-color: rgba(0, 0, 0, 0.3);
                            padding: 1.5rem;
                            h1 {
                                font-size: 25px;
                                font-weight: 400;
                                z-index: 100;
                            }
                            .middle {
                                span {
                                    margin-right: 1rem;
                                }
                            }
                            .difficulty {
                                /*font-weight: 100;*/
                                i {
                                    display: inline-block;
                                    /*background-image: url("../assets/img/fire.png");*/
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    width: 1rem;
                                    height: 1rem;
                                    margin-right: 0.4rem;
                                }
                                .unchoosed {
                                    opacity: 0.5;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>